<template>
  <page-view class="user-page">
    <page-header title="设置" :showBack="true"></page-header>
    <div class="user_content" v-if="$store.state.isLogin">
      <ul>
        <li>
          <div class="item_left">头像</div>
          <div class="item_right" @click="editUserAvatarShow = true">
            <img
              :src="$store.state.userInfo.avatarUrl"
              alt=""
              style="
                width: 30px;
                height: 30px;
                border-radius: 50%;
                vertical-align: middle;
              "
            />
            <icon name="arrow" style="margin-left: 10px" />
          </div>
        </li>
        <popup v-model:show="editUserAvatarShow" class="editDialog">
          <p style="margin: 10px 0">更换头像</p>
          <div class="center">
            <Form @submit="onSubmit">
              <cell-group inset>
                <field
                  name="uploader"
                  label="头像上传"
                  :rules="[{ required: true, message: '请上传头像' }]"
                >
                  <template #input>
                    <uploader
                      v-model="fileList"
                      :after-read="afterRead"
                      :max-count="1"
                      :max-size="500 * 1024"
                      @oversize="onOversize"
                    />
                  </template>
                </field>
              </cell-group>
              <div style="margin: 16px">
                <Button round block type="primary" native-type="submit">
                  修改
                </Button>
              </div>
            </Form>
          </div>
        </popup>

        <!-- 用户 -->
        <li>
          <div class="item_left">昵称</div>
          <div class="item_right" @click="editUseName">
            {{ $store.state.userInfo.nickname }}
            <icon name="arrow" style="margin-left: 10px" />
          </div>
        </li>
        <!-- <popup v-model:show="editUserNameShow" class="editDialog">
          <p>修改昵称</p>
          <Form @submit="onSubmit">
            <cell-group inset>
              <field
                v-model="$store.state.userInfo.nickName"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
            </cell-group>
            <div style="margin: 16px">
              <Button round block type="primary" native-type="submit">
                修改
              </Button>
            </div>
          </Form>
        </popup> -->

        <!-- 手机号 -->
        <li>
          <div class="item_left">手机号</div>
          <div class="item_right" @click="editUsePhone">
            {{ $store.state.userInfo.user_phone }}
            <icon name="arrow" style="margin-left: 10px" />
          </div>
        </li>
        <li>
          <div class="item_left" @click="$router.push({name:'tousu'})">投诉</div>
          <div class="item_right" @click="editUsePhone">
            {{ $store.state.userInfo.user_phone }}
            <icon name="arrow" style="margin-left: 10px" />
          </div>
        </li>

        <li class="loginOut" @click="loginOut">退出登录</li>
      </ul>
    </div>
  </page-view>
</template>

<script>
import {
  Icon,
  Dialog,
  Toast,
  Popup,
  Form,
  Field,
  CellGroup,
  Button,
  Uploader,
} from "vant";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref,reactive,toRefs } from "vue";
import Api from "../utils/api";
export default {
  name: "Setting",
  components: {
    Icon,
    Dialog,
    Toast,
    useRoute,
    useRouter,
    Popup,
    Form,
    Field,
    CellGroup,
    Button,
    Uploader,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    //退出登录
    const loginOut = () => {
      Dialog.confirm({
        title: "是否退出当前账户登录",
      })
        .then(async () => {
          await Api.User.logout();
          store.commit("loginOut");
          console.log("退出登录了");
          Toast.success("你已退出登录状态");
          router.replace({ name: "mine" });
        })
        .catch(() => {
          // on cancel
        });
    };

    //更换头像
    let userInfo=reactive({
      imgFile:null,
    })
    let editUserAvatarShow = ref(false);
    const fileList = ref([
      //   { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
      // Uploader 根据文件后缀来判断是否为图片文件
      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      //   { url: "https://cloud-image", isImage: true },
    ]);
    // 头像读取成功后调用
    const afterRead = (file) => {
      console.log(file);
      userInfo.imgFile = file.file
    };
    // 头像图片超过大小后触发
    const onOversize = (file) => {
      console.log(file);
      Toast("文件大小不能超过 500kb");
    };
    const onSubmit =async () => {
      console.log(userInfo.imgFile);
      let results = await Api.User.uploadUserPhoto(userInfo.imgFile)
      // console.log(results);
    };
    return {
      loginOut,
      editUserAvatarShow,
      onSubmit,
      afterRead,
      onOversize,
      fileList,
      ...toRefs(userInfo),
    };
  },
};
</script>

<style lang="less" scoped>
.user_content {
  height: 617px;
  // margin-top: 20px;
  // padding: 5px 10px;
  padding-top: 15px;
  background-color: rgb(239, 239, 239);
  // border: 1px solid black;
  ul > li {
    height: 50px;
    padding: 0 20px;
    background-color: rgb(254, 255, 255);
    border-bottom: 1px solid gainsboro;

    display: flex;
    .item_left {
      width: 50%;
      line-height: 50px;
      //   border: 1px solid black;
    }
    .item_right {
      text-align: right;
      width: 50%;
      line-height: 50px;
      //   border: 1px solid black;
    }
  }
}

::v-deep .editDialog {
  text-align: center;
  width: 300px;
  height: 300px;
  // position: relative;
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>